import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import moment from 'moment';
import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import {
  Row,
  Col,
  Card,
  Icon,
  Tooltip,
  Form,
  Button,
  Input,
  Spin,
  Table,
  message,
  InputNumber,
  Modal,
  Select,
  Drawer,
  DatePicker,
} from 'antd';
import styles from './index.less';
import pen from '@/assets/knowledge/pen.png';
import deleteZdy from '@/assets/knowledge/delete.png';
import EditorDrawer from './editorDrawer.js';
import 'moment/locale/zh-cn';
const Search = Input.Search;
const FormItem = Form.Item;
const { Option } = Select;
const { MonthPicker, RangePicker } = DatePicker;
const monthFormat = 'YYYY-MM';
moment.locale('zh-cn');
class BusinessKnowledgeBase extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectPd: '财务分析报告',
      pageSize: 10,
      page: 1,
      totala: 2,
      login: false,
      close: false,
      timeCs: String(moment().format('YYYY-MM')),
      allList: [],
    };
  }

  componentDidMount() {
    this.fetch();
    //  this.doAdd()
  }

  // 主页列表
  fetch = () => {
    this.setState({ login: true });
    const { dispatch, currentUser } = this.props;
    const { selectPd, page, pageSize, timeCs } = this.state;

    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'businessKnowledgeBase/businessGetList',
        payload: { reportType: selectPd, page, pageSize, endTime: timeCs },
        callback: res => {

          // let a = res.data.map((item, index) => {
          //   item['key'] = index
          // })
          this.setState({
            allList: res.data,
            totala: Number(res.total),
            login: false,
          });
        },
      });
    });
  };

  businessdoRemove = id => {
    this.setState({ login: true });
    const { dispatch, currentUser } = this.props;
    const { selectPd, page, pageSize, timeCs } = this.state;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'businessKnowledgeBase/businessdoRemove',
        payload: { _id: id },
        callback: res => {

          this.setState(
            {
              login: false,
            },
            () => {
              this.fetch();
            }
          );
        },
      });
    });
  };

  delAxios = item => {

    this.businessdoRemove(item._id);
  };

  // 表单数据
  userInfo = () => {
    return this.props.form.getFieldsValue();
    // 使用方法
    // let user  = this.userInfo()
    //
  };

  pageWay = a => {

    this.setState({ page: a }, () => {
      this.fetch();
    });
  };

  onShowSizepageWay = (a, b) => {

    this.setState({ page: a, pageSize: b }, () => {
      this.fetch();
    });
  };

  handleDelete = item => {
    // 编辑页
    this.setState({ close: true });

    this.setState({ bjTime: item });
  };

  addTwo = () => {
    this.setState({ close: true });
    this.setState({ bjTime: '1' });
  };

  check = () => {
    let user = this.userInfo();

    if (user.date) {

      this.setState(
        {
          selectPd: user.select,
          timeCs: moment(user.date._d).format('YYYY-MM'),
        },
        () => {
          this.fetch();
        }
      );
    } else {
      message.error(`请选择截至月份`);
    }
  };

  delDelete = item => {

    Modal['confirm']({
      title: '删除任务',
      content: '是否确定删除该指标？',
      okText: '删除',
      cancelText: '取消',
      onOk: () => {
        this.delAxios(item);
      },
      onCancel() {

      },
    });
  };

  openClose = () => {
    this.setState({ close: true });
  };

  onClose = () => {
    this.setState({
      close: false,
    });
  };

  refresh = val => {

    this.setState(
      {
        close: false,
      },
      () => {
        this.fetch();
      }
    );
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { selectedRowKeys } = this.state;
    const columns = [
      {
        title: '报告类型',
        width: 'calc(30vw)',
        dataIndex: 'reportType',
        render(item) {
          return <div dangerouslySetInnerHTML={{ __html: item }} />;
        },
      },
      {
        title: '截至月份',
        width: 'calc(35vw)',
        // sorter: (a, b) => { },
        dataIndex: 'endTime',
        render(item) {
          return <span>{moment(item).format('YYYY-MM')}</span>;
        },
      },

      {
        title: '操作',
        width: 'calc(15vw)',
        render: (text, item) => {
          return (
            <div className={styles.pb}>
              <div
                className={styles.buttongl}
                onClick={text => {
                  this.handleDelete(item);
                }}
              >
                <img src={pen} style={{ marginRight: 5 }} />
                <FormattedMessage id="app.wordTroughManage.edit" />
              </div>
              <div
                style={{ marginLeft: 10, background: '#e8313b' }}
                className={styles.buttongl}
                onClick={text => {
                  this.delDelete(item);
                }}
              >
                <img src={deleteZdy} style={{ marginRight: 5 }} />
                <span>删除</span>
              </div>
            </div>
          );
        },
      },
    ];
    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          <div style={{ minHeight: 'calc(100vh - 150px)', background: '#ffffff' }}>
            <Row className={styles.colorBackground}>
              <Col style={{ padding: 10, color: '#4B5475', fontWeight: 600 }} xs={24}>
                <div className={styles.title}>
                  <span>财务月报</span>
                </div>
              </Col>
            </Row>
            <div className="cardZdy">
              <Card bordered={false}>
                <Form layout="inline">
                  <FormItem>
                    <Button onClick={this.addTwo} icon="plus" type="primary">
                      添加
                    </Button>
                  </FormItem>
                  <span style={{ float: 'right' }}>
                    <FormItem>
                      <div>
                        <span style={{ marginRight: 10 }}>报告类型</span>
                        {getFieldDecorator('select', {
                          initialValue: this.state.selectPd,
                        })(
                          <Select style={{ width: 160 }}>
                            {/* <Option value="全部类型">全部类型</Option> */}
                            <Option value="财务分析报告">财务分析报告</Option>
                          </Select>
                        )}
                        <span style={{ margin: '0px 10px' }}>截至月份</span>
                        {getFieldDecorator('date', {
                          initialValue: moment(String(moment().format('YYYY-MM')), 'YYYY-MM'),
                        })(<MonthPicker style={{ width: 160 }} format={monthFormat} />)}
                      </div>
                    </FormItem>
                    <FormItem>
                      <Button onClick={this.check} icon="check">
                        查看
                      </Button>
                    </FormItem>
                  </span>
                </Form>
                <div className="tableyc">
                  <Spin spinning={this.state.login}>
                    <Table
                      className="zdyTable"
                      // onChange={this.pXhandleChange} //排序
                      style={{ padding: '20px 0px 0px 0px' }}
                      columns={columns}
                      dataSource={this.state.allList} // 数据
                      // onChange={this.handleChange}
                      pagination={{
                        // 分页
                        total: this.state.totala,
                        pageSize: this.state.pageSize, // 显示几条一页
                        current: this.state.page, // 当前页
                        showSizeChanger: true, // 是否显示可以设置几条一页的选项
                        showQuickJumper: true,
                        onChange: this.pageWay,
                        onShowSizeChange: this.onShowSizepageWay,
                      }}
                    />
                  </Spin>
                </div>
                <Drawer
                  className="cardZdy"
                  title="业务知识编辑"
                  placement="right"
                  closable
                  onClose={this.onClose}
                  visible={this.state.close}
                  width={900}
                  destroyOnClose
                >
                  <EditorDrawer refresh={this.refresh} bjTime={this.state.bjTime} />
                </Drawer>
              </Card>
            </div>
          </div>
        </PageHeaderWrapper>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(BusinessKnowledgeBase));
